<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="600px" :destroy-on-close="true" title="编辑扩展接口" :close-on-click-modal="false">
        <el-form v-if="show" size="small" label-position="right" label-width="80px" v-loading="loading">

            <el-form-item label="接口名称" label-position="left">
                <el-input  v-model="currentItem.name" placeholder="仅允许英文字符以及下划线" />
            </el-form-item>

            <el-form-item  label="转发到" label-position="left">
                <el-input  v-model="currentItem.forward_to" />
            </el-form-item>

            <el-form-item  label="转发方法" label-position="left">
                <el-radio-group v-model="currentItem.forward_method">
                    <el-radio label="GET">GET</el-radio>
                    <el-radio label="POST">POST</el-radio>
                    <el-radio label="PATCH">PATCH</el-radio>
                    <el-radio label="DELETE">DELETE</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="身份验证" label-position="left">
                <EnumerationSelector :radio="true" v-model="currentItem.auth" cat="auth_type"></EnumerationSelector>
            </el-form-item>

            <el-form-item  label="接口状态" label-position="left">
                <el-radio-group v-model="currentItem.status">
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">停用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item  label="备注" label-position="left">
                <el-input type="textarea" rows="6" v-model="currentItem.remark" />
            </el-form-item>

            <el-form-item label="接口示例" label-position="left">

                <el-tabs type="card" v-model="activeName" @tab-click="tabHandleClick">
                    <el-tab-pane label="小程序" name="weapp">
                    </el-tab-pane>
                    <el-tab-pane label="管理面板" name="web"></el-tab-pane>
                    <div class="code-preview">
                        <ShowCode v-show="activeName == 'weapp'" :code="weappcode"></ShowCode>
                        <ShowCode v-show="activeName == 'web'" :height="580" :code="webcode"></ShowCode>
                        <el-button @click="copyCode" icon="el-icon-document-copy" circle></el-button>
                    </div>                    

                </el-tabs>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" :loading="loading" :disabled="loading" type="default" icon="el-icon-close" @click="cancleHandle">取消</el-button>
            <el-button size="mini" :loading="loading" :disabled="loading" type="primary" icon="el-icon-check" @click="submitHandle">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import ImagePicker from "@/components/ImagePicker";
import DateTimePicker from "@/components/DateTimePicker";
import PostsSelector from "@/components/PostsSelector";
import ShowCode from "@/components/ShowCode";
import EnumerationSelector from "@/components/EnumerationSelector/Index.vue";
import {
    createExtApi,
    updateExtApi,
} from "@/api/extapi";
export default {
    name: "itemForm",
    components: { ImagePicker, DateTimePicker, EnumerationSelector, ShowCode },

    EnumerationSelectorprops: {},
    data () {
        return {
            currentItem: {},
            show: false,
            loading: false,
            activeName: 'weapp',
        };
    },
    computed: {
        canSubmit: function () {
            var h = this.currentItem;
            if (h.desc && h.name && h.expired_at) {
                return true;
            }
            return false;
        },
        weappcode: function(){
            return `
let request = require('../utils/request.js');
export function callExtapi (data) {
	return request.post("/api/v6/extapi", data);
}

//在需要使用的地方调用callExtapi方法
// callExtapi中传入的data示例
var data = {
    method_name: '${this.currentItem.name}',
    // method_name是扩展接口的名称
    data: {
        // 此处添加您的接口所需要的参数，如不需要，不传即可
    }
}

callExtapi(data).then((resp) => {
        //按您的业务逻辑，对返回结果进行处理
    }
})`
        },
        webcode: function(){
            return `
import request from '@/utils/request'
export function callExtapi (data) {
	return request({
            url: '"/api/v6/extapi"',
            method: 'POST',
            data: data
	});
}


//在需要使用的地方调用callExtapi方法
// callExtapi中传入的data示例
var data = {
    method_name: '${this.currentItem.name}',
    // method_name是扩展接口的名称
    data: {
        // 此处添加您的接口所需要的参数，如不需要，不传即可
    }
}

callExtapi(data).then((resp) => {
       // 按您的业务逻辑，对返回结果进行处理
    }
})
       `

        },
    },
    watch: {},
    methods: {

        copyCode() {
            var textToCopy = ''
            if(this.activeName == 'web'){
                textToCopy = this.webcode;
            } else if(this.activeName == 'weapp'){
                textToCopy = this.weappcode;
            }
            const textarea = document.createElement("textarea");
            textarea.value = textToCopy;
            document.body.appendChild(textarea);

            // 选中textarea中的文本
            textarea.select();

            // 执行复制命令
            document.execCommand("copy");

            // 移除临时的textarea元素
            document.body.removeChild(textarea);
            this.$message.success("已复制到剪贴板");
        },

        tabHandleClick(tab, event){
            console.log(tab);
            this.activeName = tab.name;
        },

        openDialog: function (item) {
            this.currentItem = item;
            this.show = true;
        },

        cancleHandle: function () {
            this.show = false;
            this.currentItem = {};
        },
        submitHandle: function () {
            var isok = this.validate(this.currentItem);
            if (!isok) {
                return;
            }
            var isNew = !this.currentItem.id;
            if (isNew) {
                return this.doCreate();
            }
            return this.doUpdate();
        },

        doCreate: function () {
            this.loading = true;
            createExtApi(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("创建成功");
                    this.loading = false;
                    this.show = false;
                    this.$emit("change", {});
                }
            });
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            updateExtApi(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    this.show = false;
                    _this.loading = false;
                }
            });
        },

        validate: function (data) {
            if (!data.name) {
                this.$message.error("请填写接口名称");
                return false;
            }
            if (!data.forward_to) {
                this.$message.error("请填写转发地址");
                return false;
            }
            if (!data.forward_method) {
                this.$message.error("请选择转发方法");
                return false;
            }
            // TODO
            return true;
        },
    },
};
</script>

<style scoped>
.tips ul {
    padding: 0;
    margin: 0;
}

.tips {
    font-size: 12px;
    color: #999;
}

.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
.code-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.code-preview button {
  /* margin-top: 10px; */
  position: absolute;
  top: 5px;
  right: 5px;
  /* display: none; */
}
/* .code-preview:hover button{
    display: block;
} */
</style>
